<template>
  <div class="coupon_exchange">
    <title-bar :title="'优惠券兑换'"/>
    <div class="container">
      <img :src="background_image" width="100%">
      <!--<p style="color: red">* 优惠券有使用期限限制，过了有效期不能使用；</p>
    <p>* 订单中包含特价商品时不能使用优惠券，优惠券不能与其他优惠（如促销活动）同时使用；</p>
    <p>* 优惠券只能抵扣订单金额，优惠金额超出订单金额部分不能再次使用，不能兑换现金；</p>
    <p>* 每个订单只能使用一张优惠券；<p>
      <p>* 锦致生活商城在法律范围内保留对优惠券使用细则的最终解释权。</p>-->
      <form class="parent">
        <input v-model="ticketNo" type="text" placeholder="如果您有兑换码，可在此兑换">
        <input type="button" class="btn" value="激活兑换码" @click="showData">
      </form>
    </div>
  </div>
</template>

<script>
import TitleBar from "@/vue/components/title-bar/";
import couponExchange from "@/assets/images/coupon_exchange.jpg";
import { USER_TICKETNO } from "@/api/user";
import IsEmpty from "@/vue/components/is-empty/";
import { ELE_COUPON_LIST } from "@/api/order";
// import { Button,Field } from 'vant'
// Vue.use(Field);
// Vue.use(Button);
export default {
  name: "module-task",

  components: {
    [TitleBar.name]: TitleBar,
    [IsEmpty.name]: IsEmpty
  },
  data() {
    return {
      background_image: couponExchange,
      ticketNo: ""
    };
  },
  methods: {
    showData() {
      this.$reqGet(USER_TICKETNO, {
        ticketNo: this.ticketNo,
        mid: this.user.id
      }).then(res => {
        if (res.data.error) {
          this.$dialog.alert({
            message: res.data.error
          });
          //  .then(()=>{
          //    this.$router.push({name:'user-order-ele-list',params:{active:'1'}})
          //    console.log('兑换失败')
          //  })
        } else {
          this.$dialog
            .alert({
              message: res.data.success
            })
            .then(() => {
              this.$router.replace({
                name: "user-order-ele-list",
                params: { active: "1" }
              });
              //  console.log("点击了确认按钮")
            });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  padding-top: 50px;
  padding-bottom: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  &--footer_btn {
    text-align: right;
  }
  &--panel {
    margin-bottom: 10px;
  }

  &--van-card {
    background-color: #fafafa;
  }

  &--total {
    text-align: right;
    padding: 10px;
  }
}

.parent {
  width: 100%;
  height: 42px;
  top: 50%;
  position: relative;
  margin-top: 7px;
}

.parent > input:first-of-type {
  /*输入框高度设置为40px, border占据2px，总高度为42px*/
  width: 70%;
  height: 30px;
  // line-height:24px;
  margin: 0 5px;
  border: 1px solid #ccc;
  padding: 3 10px;
  border-radius: 4px;
}

/*.parent>input:first-of-type:focus {
    border: 1px solid #317ef3;
    padding-left: 10px;
  }*/

.parent > input:last-of-type {
  /*button按钮border并不占据外围大小，设置高度42px*/
  width: 24%;
  // height: 40px;
  height: 32px;
  position: absolute;
  // background: #317ef3;
  background: #00cc66;
  border: 1px solid #00cc66;
  color: #fff;
  font-size: 13px;
  outline: none;
  border-radius: 130px;
}
/*p {
    color: red;
  }*/
</style>
